<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>操作DOM</title>
	<script>
		//HTML文档就是一个DOM树，需要通过JavaScript来操作DOM
		//更新:更新DOM节点,相当于更新了dom节点对应的html内容
		//遍历:遍历DOM节点下所有的子节点，以便进一步操作
		//添加:在DOM节点下新增一个子节点，相当于动态增加一个html节点
		//删除:将该DOM节点从HTML中删除，相当于删除了DOM节点内容和子节点内容

		//常用的，得到DOM节点的方式
		//document.getElementById() : 可以直接定位唯一的一个DOM节点
		//document.getElementByTagName() : 返回一组DOM节点，要精确定位，可以先定位符节点，在从父节点开始选择，缩小范围
		//document.getElementByClassName()

		//test 为某DOM节点
		//test.children表示直属所有子节点
		//test.firstElementChild表示test下第一个节点
		//test.lastElementChild表示test下最后一个节点

		/**
		 * 严格的讲这里的DOM是指Elment，但是DOM节点实际上是Node
		 * 在Node包括Element,Comment,CDATA_SECTION,以及根节点Document类型
		 * 绝大多数时候我们只关心Elemnt,也就是实际控制页面的Node，其他Node忽略不计
		 * 根节点Document已经自动绑定全局变量document
		 */
		`use strict`
		//获取 <p>JavaScript</p>
		document.getElementById("test-p")
		//获取 <p>Python</p><p>Ruby</p><p>Ruby</p>
		//document.getElementsByTagName()返回的是一组dom节点
		var eles = document.getElementsByTagName("c-red c-green")[0].children;
		//获取Haskell
		//数组下标为1！！！！！！！！
		var lastChildren = document.getElementsByTagName("c-green")[1].lastChild;

	</script>
</head>
<body>
	<div id="test-div">
		<div class="c-red">
			<p id="test-p">JavaScript</p>
			<p>Java</p>
		</div>
		<div class="c-red c-green">
			<p>Python</p>
			<p>Ruby</p>
			<p></p>
		</div>
		<div class="c-green">
			<p>Schema</p>
			<p>Haskell</p>
		</div>
	</div>
</body>
</html>